<template>
  <transition name="slide">
    <music-list :rank="rank"
                :title="title"
                :bg-image="bgImage"
                :songs="songs"></music-list>
  </transition>
</template>

<script type="text/ecmascript-6">
import MusicList from 'components/music-list/music-list'
import { mapGetters } from 'vuex'
import { createSong } from 'common/js/Wysong'


export default {
  computed: {
    title () {
      return this.rankList.name
    },
    bgImage () {
      if (this.songs.length) {
        return this.songs[0].image
      }
      return ''
    },
    ...mapGetters([
      'rankList'
    ])
  },
  data () {
    return {
      songs: [],
      rank: true
    }
  },
  created () {
    this._getSongsList()
  },
  methods: {
    _getSongsList () {
      var ret = []
      this.rankList.tracks.forEach((element, index) => {
        this.$axios.get(`${this.$api.base.wangYi}/search/suggest?keywords=${element.first}`).
          then(res => {
            let musicData = res.data.result.songs[0]
            ret.push({
              id: musicData.id,
              singer: musicData.artists[0].name,
              name: musicData.name,
              image: musicData.artists[0].img1v1Url
            })
            if (musicData.id) {
              this.$axios.get(`${this.$api.base.wangYi}/check/music?id=${musicData.id}`).then(res => {
                if (res.data.success) {
                  this.$axios.get(`${this.$api.base.wangYi}/song/url?id=${musicData.id}`).then(res => {
                    ret[index].url = res.data.data[0].url;
                  })
                }
              })
            }
          })
          .catch(err => { console.log(err); })
      });
      this.songs = ret
    }
  },
  components: {
    MusicList
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.slide-enter-active, .slide-leave-active
  transition all 0.3s ease
.slide-enter, .slide-leave-to
  transform translate3d(100%, 0, 0)
</style>